<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>排班管理</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/style1.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
    <script src="/js/bootstrap.bundle.min.js"></script>
    <script src="/js/jquery.min.js"></script>
    <style>
        .btn2{
            color: #eec4a0;
            background: #fdf6ec;
            border: 1px solid #f8e6cb;
        }
        .btn2:hover,.btn2:focus{
            color: #fff !important;
            background-color: #eec4a0 !important;
            border-color: #eec4a0 !important;
        }


    </style>
</head>
<body >
<div th:insert="~{admin/header1}"></div>
<main id="main">
    <section class="breadcrumbs">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center">
                <ol>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">排班管理</a></li>
                </ol>
            </div>
        </div>
    </section>
        <section class="inner-page">
                <div class="container" id="contentArea">
                          <div class="card">
                              <div class="card-header">
                                  <h3 class="card-title">排班列表</h3>
                              </div>
                    <div class="card-body">
                        <form th:action="@{/plans}" method="get" class="navbar-form navbar-right" style="display: flex;">
                            <div class="form-group">
                                <input type="text" class="form-control" name="keyword"  style="height: 40px; margin-top:-1px ;" placeholder="输入科室名称或医生名搜索" />
                            </div>
                            <button class=" btn" type="submit" style="margin-top: -1px; height: 40px; background-color: #0accce;color: white">搜索</button>
                        </form>
                        <div class="table-responsive">
                            <table class="table text-center">
                                <tbody class="text-center">
                                <tr>
                                    <th>医生姓名</th>
                                    <th>科室</th>
                                    <th>就诊人数</th>
                                    <th>周几</th>
                                    <th>操作</th>

                                </tr>
                                <tr th:each="plan : ${plans}">
                                    <td th:text="${plan.doctorName}"></td>
                                    <td th:text="${plan.departmentName}"></td>
                                    <td th:text="${plan.num}"></td>
                                    <td th:inline="javascript">
                                        <script th:inline="javascript">
                                            /*<![CDATA[*/
                                            var weekdayEn = /*[[${plan.weekday}]]*/ 'Sunday'; // 默认值
                                            var weekdaysZh = {
                                                'Monday': '星期一',
                                                'Tuesday': '星期二',
                                                'Wednesday': '星期三',
                                                'Thursday': '星期四',
                                                'Friday': '星期五',
                                                'Saturday': '星期六',
                                                'Sunday': '星期天'
                                            };
                                            var weekdayZh = weekdaysZh[weekdayEn] || '未知';
                                            document.write(weekdayZh);
                                            /*]]>*/
                                        </script>
                                    </td>
                                    <td>
                                        <a th:href="@{/plans/{id}/edit(id=${plan.id})}"
                                               class="btn btn-sm show-modal-link" style="color: #0accce;background: #e5fcfb;border-color: #ace2dd;">编辑</a>
                                        <form th:action="@{/plans/{id}/delete(id=${plan.id})}" method="get" style="display:inline">
                                            <button type="submit" class="btn btn2 btn-sm delete-confirm">删除</button>
                                        </form>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="6" style="border: none;">
                                        <ul class="pagination justify-content-center">
                                            <li class="page-item" th:if="${currentPage} != 1">
                                                <a class="page-link"
                                                   th:href="@{/plans(currentPage=${currentPage - 1})}">上一页</a>
                                            </li>
                                            <li class="page-item disabled">
                                                <a class="page-link" href="#">第<span
                                                        th:text="${currentPage}"></span>页</a>
                                            </li>
                                            <li class="page-item disabled">
                                                <a class="page-link" href="#">共<span
                                                        th:text="${totalPage}"></span>页</a>
                                            </li>
                                            <li class="page-item" th:if="${currentPage} !=${totalPage}">
                                                <a class="page-link"
                                                   th:href="@{/plans(currentPage=${currentPage + 1})}">下一页</a>
                                            </li>
                                        </ul>
                                    </td>
                                </tr>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                </div>
        </section>
</main>
<!-- 模态框结构 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title" id="exampleModalLabel">编辑排班</h2>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row col-12">
                    <div id="Detail">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var modalElement = document.getElementById('exampleModal');
        var modal = new bootstrap.Modal(modalElement);

        // 选择所有具有 'show-modal-link' 类的按钮
        var showModalLinks = document.querySelectorAll('.show-modal-link');

        // 为每个按钮添加事件监听器
        showModalLinks.forEach(function(link) {
            link.addEventListener('click', function(event) {
                event.preventDefault();
                fetch(this.href)
                    .then(response => response.text())
                    .then(html => {
                        document.getElementById('Detail').innerHTML = html;
                        modal.show();
                    })
                    .catch(error => console.error('加载失败:', error));
            });
        });

        // 模态框隐藏后的清理操作
        modalElement.addEventListener('hidden.bs.modal', function () {
            modalElement.setAttribute('aria-hidden', 'true');
            document.getElementById('Detail').innerHTML = '';
        });
    });
    document.addEventListener('DOMContentLoaded', function () {
        // ... 之前的脚本内容 ...
        // 确认删除的函数
        function confirmDelete(event) {
            event.preventDefault(); // 阻止表单默认提交行为
            if (confirm('确定要删除这条排班信息吗？')) {
                // 如果用户点击确定，则提交表单
                event.target.closest('form').submit();
            }
        }

        // 为所有删除按钮添加事件监听器
        var deleteButtons = document.querySelectorAll('.delete-confirm');
        deleteButtons.forEach(function(button) {
            button.addEventListener('click', confirmDelete);
        });
    });
</script>
</body>
</html>